<template>
<div>
  <button @click="handleClick(true)" class="solid">实心</button>
  <button @click="handleClick(false)" class="humble">虚心</button>
</div>
  <SolidBox v-if="flag" />
  <HumbleBox v-else />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import HumbleBox from '@/views/CommonGeometry/BoxIndex/HumbleBox.vue'
import SolidBox from '@/views/CommonGeometry/BoxIndex/SolidBox.vue'

let flag = ref<boolean>(true)

const handleClick = (val: boolean) => {
  console.log('点击切换组件:>> ', val)
  flag.value = val
}
</script>

<style>
.solid {
  width: 100px;
  height: 50px;
  background-color: #2b7098;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-right: 10px;
}
.humble {
  width: 100px;
  height: 50px;
  background-color: #2b7098;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>